<template>
	<div>
		<van-tabbar v-model="tabbarActive">
			<van-tabbar-item name="home" to="/home" replace>
				<div class="user-tabbar">
					<van-image width="30" height="30"
						:src="tabbarActive === 'home'?require('../assets/userTabbarImg/home-select.png'):require('../assets/userTabbarImg/home.png')" />
					<span class="user-tabbar-span">首页</span>
				</div>
			</van-tabbar-item>
			<van-tabbar-item name="usedcar" to="/usedcar" replace>
				<div class="user-tabbar">
					<van-image width="30" height="30"
						:src="tabbarActive === 'usedcar'?require('../assets/userTabbarImg/usedcar-select.png'):require('../assets/userTabbarImg/usedcar.png')" />
					<span class="user-tabbar-span">找车</span>
				</div>
			</van-tabbar-item>
			<van-tabbar-item name="personal" to="/personal" replace>
				<div class="user-tabbar">
					<van-image width="30" height="30"
						:src="tabbarActive === 'personal'?require('../assets/userTabbarImg/personal-select.png'):require('../assets/userTabbarImg/personal.png')" />
					<span class="user-tabbar-span">我的</span>
				</div>
			</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
	export default {
		name: 'UserTabbar',
		data() {
			return {
				tabbarActive: this.active
			}
		},
		props: {
			active: String
		}
	}
</script>

<style scoped>
	.van-tabbar {
		height: 60px;
		border-top: solid;
		border-top-color: #00979D;
		border-top-width: 1.5px;
	}

	.user-tabbar {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.user-tabbar-span {
		margin-top: 7px;
	}
</style>
